<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test shadowRoot</title>
</head>
<body>
<p>This is main content before shadowRoot.</p>
<div>
<template shadowrootmode="closed">
  <style>
  :host { background-color: yellow; }
  div { background-color: red; }
  img { width: 60px; height: 60px; }
  </style>
  <div>This is sub-content.</div>
  <img src="resources/green.bmp">
  <p>
  <template shadowrootmode="closed">
    <style>
    :host { background-color: gray; }
    img { width: 60px; height: 60px; }
    </style>
    <div>This is deep-sub-content.</div>
    <img src="resources/blue.bmp">
  </template>
  This is hidden content.
  </p>
</template>
<strong>This</strong> is very good.
</div>
<p>This is main content after shadowRoot.</p>
</body>
<script src="../../common.js"></script>
<script>utils.loadShadowDoms(document);</script>
</html>
